{% extends 'base.html' %}
{% block content %}
    <style>
        .da{
            margin: 1px 25px;
            height: 630px;
            background-color: #f1f1f3;
        }
        p{
            display: inline-block;
            margin-top: 18px;
            margin-left: 10px;
            float: left;
            height: 7px;
            width: 90px;
            float: left;
        }
        .xiao2{
            float: left;
            margin-top: 20PX;
            margin-left: 20px;
            height: 450px;
            width: 1580px;
            border:1px solid black;
            background-color: #f1f1f3;
        }
        .fuhao{
            float: left;
            height: 55px;
            width: 1580px;
            border:1px solid black;
            background-color: #f1f1f3;
        }
        .xiao3{
            float: left;
            margin-left: 20px;
            height: 25px;
            width: 1580px;
            border:1px solid black;
            background-color: #f1f1f3;
        }
        .xiao4{
            float: left;
            margin-left: 20px;
            height: 70px;
            width: 1580px;
            border:1px solid black;
            background-color: #f1f1f3;
        }
        .lx{
            float: left;
            margin-left: 12px;
            margin-top: 19px;
            height: 23px;
            width: 145px;
        }
        .jf{
            float: left;
            margin-left: 9px;
            margin-top: 19px;
            height: 23px;
            width: 145px;
        }
        .p{
                   float: left;
            margin-left: 95px;
                }
        .xiao5{
            float: left;
            margin-top: 20px;
            margin-left: 455px;
            text-align: center;
            height: 35px;
            width: 200px;
            border:1px solid black;
            background-color: #f1f1f3;
        }
        .xiao6{
            float: left;
            margin-top: 20px;
            text-align: center;
            height: 35px;
            width: 200px;
            border:1px solid black;
            background-color: pink;
        }
        select{
            width: 135px;
            height: 30px;
        }
        button{
            height: 35px;
            width: 200px;
        }
        button:hover{
            background-color: darkmagenta;
        }
        .col-11{
            margin-top: 10px;
            height: 25px;
            width: 1500px;
        }
    </style>

<script type="text/javascript" src="/static/ue/ueditor.config.js"></script>
<script type="text/javascript" src="/static/ue/ueditor.all.min.js"></script>
<script type="text/javascript" src="/static/ue/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
    var ue = UE.getEditor('content', {
        initialFrameHeight:400,
        autoHeightEnabled:true,
        serverUrl: '/uedit',
    });
</script>

    <div class="da">
        <div>
    <label for="headline" class="col-1">文章标题：</label>
        <input type="text" class="col-11" id="headline">
            </div>
    <div class="xiao2">
        <div class="fuhao">
            <script id="content" name="content" type="text/plain">
            </script>
        </div>
    </div>
    <div class="xiao3">元素路径：</div>
    <div class="xiao4">
        <p>类型：</p>
        <div class="lx"><select id="type">
            <option value="1">php开发</option>
            <option value="2">java开发</option>
            <option value="3">python开发</option>
            <option value="4">web前端</option>
            <option value="5">测试开发</option>
            <option value="6">数据科学</option>
            <option value="7">网络安全</option>
            <option value="8">蜗牛杂谈</option>
        </select></div>
        <p class="p">积分：</p>
        <div class="jf"><select id="credit">
            <option value="0">免费</option>
            <option value="1">1分</option>
            <option value="2">2分</option>
            <option value="5">5分</option>
            <option value="10">10分</option>
            <option value="20">20分</option>
            <option value="50">50分</option>
        </select></div>
        <div class="xiao5">
            <button>保存草稿</button></div>
        <div class="xiao6">
            <button onclick="doUserPost()">发布文章</button></div>
    </div>
</div>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
     function doUserPost(){
         //获取相关数据
         var headline = $("#headline").val().trim();
         var contentPlain = UE.getEditor("content").getContentTxt();
         var type = $("#type").val();
         var credit = $("#credit").val();

         var param = "headline="+headline;
         param += "&credit="+credit;
         param += "&type="+type;
         param += "&content="+contentPlain;
         console.log(param)
         $.post('/add_article',param, function (data) {
             if(data == "OK"){
                 location.href = "/";
             }else{
                 alert("文章发布失败");
             }
         })
     }
</script>
{% endblock %}
